<template>
  <el-dialog
    v-model="state.dialogFormVisible"
    title="编辑"
    custom-class="dialog-min-width"
  >
    <el-form ref="formRef" :model="form" label-width="120px">
      <el-form-item label="商品名称">
        <el-input v-model="form.goodsName"></el-input>
      </el-form-item>
      <el-form-item label="商品种类">
        <el-select
          v-model="form.goodsClass"
          placeholder="please select your zone"
        >
          <el-option label="男装" value="nanzhuang"></el-option>
          <el-option label="女装" value="nvzhuang"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上架时间">
        <el-col :span="11">
          <el-date-picker
            v-model="form.goodsPubDate"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input-number
          v-model="form.goodsSale"
          :precision="2"
          :step="0.1"
          :max="9999"
        />
      </el-form-item>
      <el-form-item label="商品状态">
        <el-switch v-model="form.goodsState"></el-switch>
      </el-form-item>
      <el-form-item label="商品等级评价">
        <el-radio-group v-model="form.goodsStar">
          <el-radio label="★">★</el-radio>
          <el-radio label="★★">★★</el-radio>
          <el-radio label="★★★">★★★</el-radio>
          <el-radio label="★★★★">★★★★</el-radio>
          <el-radio label="★★★★★">★★★★★</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品地址">
        <el-input v-model="form.goodsAddress" type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref, watch } from "vue";

// ts 语法，有默认值版本
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {
    visible: false,
  }
);

const emit = defineEmits<{
  (event: "on-submit", result: boolean): void;
}>();

const state = reactive({
  dialogFormVisible: false,
});

const handleSubmit = () => {
  // 处理业务逻辑，触发关闭事件
  state.dialogFormVisible = false;
  emit("on-submit", true);
};

const form = ref({
  goodsId: "",
  goodsName: "",
  goodsAddress: "",
  goodsStar: "",
  goodsImg: "",
  goodsClass: [],
  goodsSale: "",
  goodsPubDate: "",
  goodsState: false,
});

const show = (row: any) => {
  //   console.log(form);
  form.value = Object.assign({}, row);
  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
